<template>
    <div class="app-container">
        <div class="top-select">
            选择战队:<el-select v-model="value" placeholder="请选择" style="margin-left: 20px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="context" >
        <div class="info">
            <div class="info-title">
                资源领取限制
            </div>
            <el-card class="box-card">
               <div class="card-context">招商经理每天最多可领取  <el-input placeholder="请输入" style="width: 80px;margin: 0 10px;" v-model="value" @input="value=value.replace(/[^\d]/g,'')"></el-input>    个公共资源池中的资源</div> 
               <div class="card-context"><el-checkbox v-model="checked">包含当天被动分配的资源</el-checkbox></div> 
            </el-card>
        </div>
        <div class="info">
            <div class="info-title">
                资源回收设置
            </div>
            <el-card class="box-card">
               <div class="card-context">创建/领取/分配/移交资源后  <el-input placeholder="请输入" style="width: 80px;margin: 0 10px;"></el-input>天内未转客户则自动释放到公共资源池</div> 
               <div class="card-context">创建/领取/分配/移交资源后每隔 <el-input placeholder="请输入" style="width: 80px;margin: 0 10px;"></el-input>天需要跟进一次，未填写跟进记录则自动释放到公共资源池</div> 
            </el-card>
        </div>
        <div class="info">
            <div class="info-title">
                经销商回流设置
            </div>
            <el-card class="box-card">
                <div class="card-context">停止合作的经销商<el-input placeholder="请输入" style="width: 80px;margin: 0 10px;"></el-input>天内未再次合作则自动回流到公共资源池</div> 
            </el-card>
        </div>
        <div class="info">
            <div class="info-title">
                跟进记录提醒设置
            </div>
            <el-card class="box-card">
                <div class="card-context">创建/领取/分配/移交资源后每隔<el-input placeholder="请输入" style="width: 80px;margin: 0 10px;"></el-input>天内未填写跟进记录，系统发送消息提醒</div> 
                <div class="card-context">已合作经销商每隔<el-input placeholder="请输入" style="width: 80px;margin: 0 10px;"></el-input>天未填写跟进记录，系统发送消息提醒</div> 
            </el-card>
        </div>
       <div class="info">
        <el-button type="primary" style="width: 200px;" @click="sumbit">确定</el-button>
       </div>
    </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        value:'',
        options: [{
          value: '',
          label: ''
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    methods: {
        sumbit(){
            if(!this.value){
                this.$message.error('请先选择战队');
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.app-container {
    .top-select {
        font-size: 22px;
        display: flex;
        align-items: center;
    }
    .context{
    .info {
        margin-top: 40px;

        .info-title {
            font-size: 22px;
            padding-left: 20px;
            height: 25px;
            position: relative;
            margin-bottom: 20px;
            &::before {
                content: '';
                display: block;
                width: 10px;
                height: 100%;
                position: absolute;
                top: 3px;
                background-color: #1890ff;
                border-radius: 4px;
                left: 0;
            }
        }
        .box-card{
            .card-context{
                margin-bottom: 20px;
                &:nth-child(2){
                    margin-bottom: 0px;
                }
            }
        }
    }
}
}
</style>